<template>
  <div>
    <nav>
      <ul>
        <!-- 
            1.声明式导航
              * to：设置路由跳转连接
              * tag：路由跳转的标签类型
              * active：匹配指定路由的类名
              * event：触发路由的事件
        -->
        <!-- <li :key='item.path' v-for="item in menu">
          <router-link :to='item.path' tag='span' active-class='current' event='mouseenter'>{{item.title}}</router-link>
        </li> -->
        <!-- 
            2.编程式导航
              * this.$router.push(path)
              * this.$router.go/back/forward(number)
              * this.$router.replace()    --  等效于go，但不留记录

        -->
        <li :key='item.path' v-for='(item,idx) in menu' @click='goto(item.path,idx)' :class="currentInedx===idx?'current':''">
          {{item.title}}
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  /* 导航数据 */
  data(){
    return {
      menu:[
        {
          title:'首页',
          path:'/home'
        },
        {
          title:'用户管理',
          path:'/user'
        },
        {
          title:'商品管理',
          path:'/goods'
        },
        {
          title:'顶管管理',
          path:'/order'
        },
      ],
      currentInedx:0
    }
  },
  methods:{
    goto(path,idx){
      this.$router.push(path);
      this.currentInedx=idx
    }
  }
}
</script>

<style>
  .current{
    background-color: skyblue;
  }
</style>
